vue 销毁eventBus
eventBus 适用于不同页面传递值，当然也可以用vuex， 本篇讲解的是如何使用吃，并销毁eventBus我在A页面中发布1 mounted(){2 eventBus.$on("clickLeft",(id)=>{3 this.groupId = id;4 this.getTableData()5 })6 },在B页面中触发1 clickItems(id){2 this.activeId = ...
2024-01-10
vue 中使用print.js导出pdf操作
1.print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this.dom = do...
2024-01-10
vue 中使用print.js导出pdf操作
1.print.js// 打印类属性、方法定义/* eslint-disable */const Print = function (dom, options) { if (!(this instanceof Print)) return new Print(dom, options); this.options = this.extend({ 'noPrint': '.no-print' }, options); if ((typeof dom) === "string") { this.dom = do...
2024-01-10
vue el-input数据处理问题？
要求el-input输入的值是数字数组形式：[123,123]，组件定义的value是string类型，所以在查询的时候需要对input输入的值进行转换。我的处理方式： // 处理表单所有元素数据 // 处理表单所有元素数据 handleAllFormItem () { // 处理空数据 let newForm = {} let objs = {...
2024-02-19
vue 实现input框的宽度自适应？
vue 如何实现input框的宽度自适应？回答：不知道你说的自适应宽度具体指的是什么根据父元素宽度自动适应宽度，那这个CSS就行，与Vue无关，方案有多种，flex的示例如下：.container { display: flex; flex-direction: row;}.container input { flex: 1;}根据输入内容自适应宽度，那么就需要借助JS来实现...
2024-02-27
vue滚动表格，失去所有input框焦点
表格内循环出来大量的input框，现在是点击一个input框，滚动时焦点会随着滚动而变化，但是并不会触发@change里的函数，所以导致当初已输入完的数据，因为滚动而丢失，所以想监听滚动，一旦滚动，就让所有input失去焦点<vxe-table :data="list" show-overflow :loading="loadTable" highlight-current-row highlig...
2024-03-06
新建一个基于vue.js+Mint UI的项目
上篇文章里面讲到如何新建一个基于vue,js的项目（详细文章请戳用Vue创建一个新的项目）。该项目如果需要组件等都需要自己去写，今天就学习一下如何新建一个基于vue.js+Mint UI的项目，直接使用比较热门的一个基于 Vue.js 的移动端组件库，那就是MintUI。使用 vue-cli首先需要使用vue-cli，因为上一篇文...
2024-01-10
vue ui有多香~~
可视化管理项目就这么香可以在指定文件夹创建项目 也可以把已有项目导入进来可以查看/增加/删除/更新插件、依赖、配置直接在搜索框输入你要找的插件或依赖或配置 可视化 安装可以进行运行、打包、检查等操作那么问题来了 怎么打开这个ui界面？在终端或者打开项目下的终端运行以下命令v...
2024-01-10
【Vue】vue.js的keep-alive include无效
我的项目只要是写了keep-alive标签，无论你exclude里面写了什么，它都会全部页面都缓存。<keep-alive exclude="xxx,yyy"><router-view></router-view></keep-alive>求解啊？回答name，是name属性！！！注意一定要给需要缓存的组件都写name属性的值。我一开始还以为是路由的name值，后来发现搞错了 = =exclude 完全没问题, 几...
2024-01-10
vue.min.js如何本地引入（import）
问题描述我想要将vue本地化，现在的思路是在js文件中引入vue.min.js，但是vue.min.js本身不是用export输出的，官网上也是在html中引入，请问该如何改造vue.min.js才能使用import引入回答人家不是提供了基于 ES6 模块化的输出版本了？Vue 源码前面一段适配环境的，根据你的前端环境来判断(function (global, factory) ...
2024-01-10
vue.js watch经常失效的场景与解决方案
使用过watch的，应该起码经历过一次失效。比如，我们监听对象的时候，在没有踩坑之前，很容易这样写：但是，❌，这里的watch是无效的!!!因为 obj 是引用类型！！！引用类型的指针是固定的，所以如果不是重新赋值，那么其赋值的变量自然也不会发生变化。举个例子：let obj = { a: 1 };let obj1 = ob...
2024-01-10Vue.js中关于EventBus的抽像？
场景:父组件:<div v-for="(item,index) in corpKideList" :id="item.names" :key="index" :ref="item.names"> <component :is="item.key" :ref="item.key" :type="item.key" :apply-...
2024-02-12
vue中页面input输入的内容是一个js函数或表达式，如何让其生效？
有一个需求，需要给不同的类目赋值动态的调用接口并处理它的返回值。比如说有个类目叫三年2班的所有学生，我需要给它绑定一个接口地址，接口调用方式，接口入参以及返回值的处理逻辑，并且把它存进数据库，下次用的时候直接调用，页面上是这样的：正常情况下，的处理是request(地址，get，入参）.then(res=>{ return res.data})但是由于需要页面传值，导致接口返值定义这里...
2024-03-13
vue 如何在mixins中创建页面公用js
一，在你项目的建一个mixins.js文件夹，比如我是在src/views/pages/mixins，然后在mixins里创建一个自己所需要的公用js文件，比如在我项目中，如下图：然后这个公用js文件里除了watch方法我试了不管用，其它computed，methods均可正常写入公用的功能方法二、在需要使用公用js的页面引入此js文件，如下图：以...
2024-01-10Vue.js实现一个自定义分页组件vue-paginaiton
vue实现一个分页组件vue-paginaitonvue使用了一段时间的感触就是，我再也不想直接操作DOM了。数据绑定式的编程体验真是好。实现的一个分页组件。这里的css就不放出来了，可以看直接去github上下载：vue-pagination先上一张实例图吧模版<div class="page-bar"> <ul> <li v-if="showFirstText"><a v-on：click="cur--">上一页...
2024-01-10
vue官方分页组件vuejs-uib-pagination的使用
参考链接：https://vuejsexamples.com/best-and-complete-pagination-plugin-for-vue-2/https://github.com/sant123/vuejs-uib-pagination1，安装vuejs-uib-paginationnpm install vuejs-uib-pagination2，局部注册组件 /** 引入分页插件 */ import pagination from "vuejs-uib-pagination"; Vue...
2024-01-10
vue中使用printjs打印表格选择横向打印不能铺满？
如题，需要实现打印表格功能，但是表格内容巨长，用printjs插件，选择横向打印页面铺不满，我在style属性中控制表格宽度但是好像不行，页面上表格样式：选择横向打印的预览样式：设置style的代码：print() { // size: A4 portrait; const style = '@page {margin:10mm 10mm; } ' + ...
2024-03-08js实现input密码框显示/隐藏功能
JavaScript实现input密码框显示/隐藏的功能，供大家参考，具体内容如下实现代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .password{ position: relative; width: 280px; height: 60px; } .password,.n-txtCss{ display: flex; align-items: center; } .password .fa{ positio...
2024-01-10
CountUp.js 轻量级数字滚动动画特效插件
CountUp.js 是一种无依赖项的轻量级 JavaScript 类，可用于快速创建以更有趣的方式显示数字数据的动画。尽管它的名字，CountUp 可以在两个方向上进行计数，具体取决于您传递的开始和结束值。CountUp.js 支持所有主流浏览器。基于 MIT 许可证发布。特征高度可定制：的选项范围很广，您甚至可以替换数字...
2024-01-10关于vue.js v-bind 的一些理解和思考
一、v-bind 初探它是一个 vue 指令，用于绑定 html 属性，如下：<div id="app"> <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p></div>......var vm = new Vue({ el: '#app', data: { title: 'title content' }});这里的 html 最后会渲染成：<div id="app"> <p title="title content">h...
2024-01-10
vue.js下移动端绑定click事件失效，pc端正常的问题
原因可能是我在项目中使用到了 better-scroll，默认它会阻止 touch 事件。所以在配置中需要加上 click: true 即可。例如：mounted () { this.scroll = new BScroll(this.$refs.wrapper, { mouseWheel: true, click: true, tap: true })}...
2024-01-10
ESLint 是如何检查 .vue 文件的
近期要做一个类似的内容，学习了一下 Vue 是如何做的。ESLint 中的扩展机制首先需要了解一下如何才能扩展 ESLint 的功能。ESLint 扩展机制主要有 Rules、Plugins、Formatters、Parsers，Formatters 目前不需要用到，因此着重看一下其他三种方式。Parser用于自定义的解析文件内容，返回 AST 给后续步骤使用。Rules...
2024-01-10
vue 多层对象嵌套 导致this指向错误
option1 和 echartData 定义在data中如下图 option1 子属性 series.data 想引用 echartData但是这个时候的 this 不是指向 vue 实例的问题：怎么正确的获取到 this.echartData回答可以吧option1定义为计算属性这种情景不适用this，可以把echartData提取出来单独定义，就能实现多处引用了data() { const echartData = {}; return ...
2024-01-10快速解决vue.js 模板和jinja 模板冲突的问题
jinjia和vue.js默认的模板转义符都是{{}}目前的解决办法是修改vue.js的转义符,将原来的{{}}替换为其他标签,我改为{[]}版本1.x和2.x方法如下// 1.xVue.config.delimiters = ['{[', ']}'] // 2.xnew Vue({ delimiters: ['{[', ']}']})以上这篇快速解决vue.js 模板和jinja 模板冲突的问题就是小编分享给大家的全部内容了，希望能...
2024-01-10Vue 页面切换效果之 BubbleTransition(推荐)
CodePen 地址前端使用 SPA 之后，能获得更多的控制权，比如页面切换动画，使用后端页面我们可能做不了上面的效果，或者做出来会出现明显的闪屏。因为所有资源都需要重新加载。今天使用 vue，vue-router，animejs 来讲解如何上面的效果是如何实现的。步骤点击菜单，生成 Bubble，开始执行入场动画...
2024-01-10
